<template>

    <el-card>
        <el-row :gutter="1">

            <el-col :span="3">
                <el-select v-model="queryInfo.type"   >
                    <el-option

                            label="按身份证号检索"
                            value="id_card">
                    </el-option>
                    <el-option

                            label="按姓名检索"
                            value="user_name">
                    </el-option>
                    <el-option

                            label="按返回后的地点检索"
                            value="to">
                    </el-option>
                    <el-option

                            label="按返回前的地点检索"
                            value="come">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="12" style="display: flex">
                <el-input v-model="queryInfo.query"  width="30"></el-input>
                <el-button @click="getAllMembers" type="primary" size="mini">查询</el-button>
                <el-button type="primary" @click="ShowAddMemberDialog" size="mini">添加成员</el-button>
                <el-button type="primary" @click="exportExcel">导出</el-button>
            </el-col>

        </el-row>

        <!--添加成员-->

        <el-dialog
                title="添加人员"
                :visible.sync="addMemberDialogVisible"

                width="60%"
        >

            <el-form ref="form" :inline="true" :model="memberForm" label-width="120px" width="90%">

                <el-form-item label="姓名">
                    <el-input v-model="memberForm.user_name"></el-input>
                </el-form-item>

                <el-form-item label="身份证号">
                    <el-input v-model="memberForm.id_card"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="memberForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="memberForm.tel"></el-input>
                </el-form-item>



                <el-form-item label="返回前的地址">
                    <el-input v-model="memberForm.come"></el-input>
                </el-form-item>
                <el-form-item label="返回后的地址">
                    <el-input v-model="memberForm.to"></el-input>
                </el-form-item>
                <el-form-item label="到达万源的时间">
                    <el-date-picker
                            v-model="memberForm.arrive_time"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="隔离措施">
                    <el-input v-model="memberForm.measure"></el-input>
                </el-form-item>

                <el-form-item label="是否发热">
                    <el-input v-model="memberForm.fever"></el-input>
                </el-form-item>
                <el-form-item label="是否留院观察">
                    <el-input v-model="memberForm.rehosipital"></el-input>
                </el-form-item>
                <el-form-item label="是否核酸检查">
                    <el-input v-model="memberForm.nucleic"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="memberForm.remark"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
    <el-button @click="addMemberDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addMember()">确 定</el-button>
  </span>
        </el-dialog>

        <!--编辑信息-->
        <el-dialog
                title="修改"
                :visible.sync="modifyMemberDialogVisible"

                width="60%"
        >
            <el-form ref="form" :inline="true" :model="memberModifyForm" label-width="120px" width="90%">
                <el-form-item label="姓名">
                    <el-input v-model="memberModifyForm.user_name"></el-input>
                </el-form-item>

                <el-form-item label="身份证号">
                    <el-input v-model="memberModifyForm.id_card"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="memberModifyForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="memberModifyForm.tel"></el-input>
                </el-form-item>



                <el-form-item label="返回前的地址">
                    <el-input v-model="memberModifyForm.come"></el-input>
                </el-form-item>
                <el-form-item label="返回后的地址">
                    <el-input v-model="memberModifyForm.to"></el-input>
                </el-form-item>
                <el-form-item label="到达万源的时间">
                    <el-date-picker
                            v-model="memberModifyForm.arrive_time"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="隔离措施">
                    <el-input v-model="memberModifyForm.measure"></el-input>
                </el-form-item>

                <el-form-item label="是否发热">
                    <el-input v-model="memberModifyForm.fever"></el-input>
                </el-form-item>
                <el-form-item label="是否留院观察">
                    <el-input v-model="memberModifyForm.rehosipital"></el-input>
                </el-form-item>
                <el-form-item label="是否核酸检查">
                    <el-input v-model="memberModifyForm.nucleic"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="memberModifyForm.remark"></el-input>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
    <el-button @click="modifyMemberDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ModifyMember()">确 定</el-button>
  </span>
        </el-dialog>







        <!--人员列表-->
        <el-row>
            <el-table
                    ref="filterTable"
                    :data="tableData.filter(data => !search || data.user_name.toLowerCase().includes(search.toLowerCase()))"
                    border
                    style="width: 100%"
                    id="member"
            >
                <el-table-column
                        label="序号"
                        type="index"
                width="50">
                </el-table-column>

                <el-table-column
                        label="名字"
                        prop="user_name"
                        width="70"
                >
                </el-table-column>
                <el-table-column
                    label="性别"
                    prop="sex"
                    width="70"
                    :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }]"
                    :filter-method="filterHandler"
            >
            </el-table-column>
                <el-table-column
                        label="身份证号"
                        prop="id_card"
                        width="180"
                height="600">
                </el-table-column>

                <el-table-column
                        label="电话"
                        prop="tel">
                </el-table-column>
                <el-table-column
                        label="返回前的地址"
                        prop="come">
                </el-table-column>
                <el-table-column
                        label="返回后的地址"
                        prop="to">
                </el-table-column>
                <el-table-column
                        label="到达万源时间"
                        width="110"
                >

                    <template slot-scope="scope">
                        {{scope.row.arrive_time | dateFormatYMH }}

                    </template>
                </el-table-column>
                <el-table-column
                        label="隔离措施"
                        prop="measure">
                </el-table-column>
                <el-table-column
                        label="是否发热"
                        prop="fever">
                </el-table-column>
                <el-table-column
                        label="是否留院观察"
                        prop="rehosipital">

                </el-table-column>
                <el-table-column
                        label="核酸检测"
                        prop="nucleic">

                </el-table-column>

                <el-table-column
                        label="填写人"
                        prop="create_person">
                </el-table-column>
                <el-table-column
                        label="填写时间"
                        width="180"
                >
                    <template slot-scope="scope">
                        {{scope.row.create_time | dateFormat }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注"
                        prop="remark">
                </el-table-column>

                <el-table-column
                        align="center" width="150">
                    <template slot="header" slot-scope="scope">
                        <el-input placeholder="二次姓名检索" v-model="search"  class="input-with-select"></el-input>
                    </template>

                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table></el-row>
        <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1,5,10,50]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

    </el-card>




</template>

<script>

    import d from "../../utils/data2excel"

    export default {
        data() {
            return {

                //显示添加人员控件
                addMemberDialogVisible:false,

                //时间选择器
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                //添加人员

                memberForm:{
                   id_card:'',
                    user_name: '',
                    sex: "男",
                    tel: '',
                    come:'',
                    to:'',
                    arrive_time:new Date(),
                    addr: "",
                    measure:'',
                    fever:'',
                    rehosipital:'',
                    nucleic:'',
                    create_person:"",
                    create_time:'',
                    remark:""
                },
                modifyMemberDialogVisible:false,
                memberModifyForm:{
                    user_id: '',
                    user_name: '',
                    sex: "",
                    tel: '',
                    come:'',
                    to:'',
                    arrive_time:'',
                    measure:'',
                    fever:'',
                    rehosipital:'',
                    nucleic:'',
                    create_person:"",
                    create_time:'',
                    remark:""
                }
                ,
                modifyId:'',
                modifyName:'',
                modifyID:'',
                total:0,
                queryInfo: {
                    username:'',
                    type:'id_card',
                    query: '',
                    pagenum: 1,
                    pagesize: 10
                },
                //人员列表
                tableData: [],
                search: ''
            }
        },
        created(){
            this.getAllMembers()
        },
        methods: {
            async  handleEdit(index, row) {
                this.modifyId=row.i
                let {data:res}= await this.$http.get(`epidemic/${row.i}`)
                console.log(res.data);
                this.memberModifyForm=
                    {   i:res.data[0].i,
                        id_card: res.data[0].id_card,
                        user_name: res.data[0].user_name,
                        sex:res.data[0].sex,
                        tel: res.data[0].tel,
                        type: res.data[0].type,
                        lib: res.data[0].lib,
                        teacher: res.data[0].teacher,
                        come:res.data[0].come,
                        to: res.data[0].to,
                        arrive_time:res.data[0].arrive_time,
                        measure:res.data[0].measure,
                        fever:res.data[0].fever,
                        rehosipital:res.data[0].rehosipital,
                        nucleic:res.data[0].nucleic,
                        create_person:res.data[0].create_person,
                        remark:res.data[0].remark
                    }
                this. modifyMemberDialogVisible=true

            },
            //修改成员信息
            async  ModifyMember(){
                let {data:res}= await this.$http.put(`epidemic/${this.modifyId}/update`, this.memberModifyForm)
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this. modifyMemberDialogVisible=false
                this.getAllMembers()
            },



            //删除成员
            async handleDelete(index, row) {
                let relust =await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                })

                if (relust==='confirm'){

                    let {data:res}= await this.$http.delete(`epidemic/${row.i}`)

                    if (res.meta.status != 200) return this.$message.error(res.meta.msg)
                    this.$message.success(res.meta.msg)
                    this.getAllMembers()
                }
            }
            ,
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },

            filterStatus(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            }
            ,ShowAddMemberDialog(){
                this. addMemberDialogVisible=true
            }
            ,
            //添加成员
            async addMember(){
                // 参数验证
                if( !this.memberForm['user_name']){
                    return this.$message.error('姓名不能为空')
                }
                if( !this.memberForm['id_card']){
                    return this.$message.error('身份证号不能为空')
                }
                if( !this.memberForm['tel']){
                    return this.$message.error('电话号码不能为空')
                }
                if( !this.memberForm['come']){
                    return this.$message.error('返回前的地址不能为空')
                }
                if( !this.memberForm['to']){
                    return this.$message.error('返回后的地址不能为空')
                }
                if( !this.memberForm['arrive_time']){
                    return this.$message.error('到达时间不能为空')
                }
                let  username = this.$store.state.username?this.$store.state.username:window.sessionStorage.getItem('username')
                console.log(username);
                this.memberForm['create_person']=username
                let {data:res }=await this.$http.put('/epidemic',this.memberForm)
                console.log(this.memberForm);
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.$message.success(res.meta.msg)
                this. addMemberDialogVisible=false
                this.getAllMembers()
            },

            //获取成员数据
            async getAllMembers(){

                let {data:res }=await this.$http.get('epidemic',{params:this.queryInfo})
                if( res.meta.status!= 200)  return  this.$message.error(res.meta.msg)
                this.tableData = res.data.persons
                this.queryInfo.pagenum=res.data.pagenum
                this.total=res.data.total
            }
            ,sizeChange(newsize){
                this.queryInfo.pagesize=newsize
                this.getAllMembers()
            },
            currentChange(currentPage){
                this.queryInfo.pagenum=currentPage
                this.getAllMembers()


            },
            //定义导出Excel表格事件
            async exportExcel() {



                let relust =await this.$confirm('该功能还在完善中, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                })

                if (relust==='confirm'){

                    let ctime = new Date()
                    let cy = ctime.getFullYear()
                    let cm = ctime.getMonth() + 1
                    let cd = ctime.getDate()
                    let chh = ctime.getHours()
                    let cmm = ctime.getMinutes()
                    let css = ctime.getSeconds()
                    let create_time = `${cy}年${cm}月${cd}日${chh}时${cmm}份${css}秒`
                    d('#member', '返万人员列表_截至' + create_time)
                    await this.$http.get('epidemic/1/export')
                }
            }



        },
    }
</script>
